<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>厨房管家 - 原型设计展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .iframe-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .iframe-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 35px 55px rgba(0, 0, 0, 0.15);
        }
        
        .iframe-wrapper {
            border-radius: 60px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            background: #000;
            padding: 10px;
        }
        
        iframe {
            width: 390px;
            height: 844px;
            border: none;
            border-radius: 50px;
        }
        
        .page-label {
            color: white;
            font-weight: 600;
            text-align: center;
            margin-bottom: 15px;
            font-size: 18px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 30px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        @media (max-width: 1600px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 1000px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body class="p-8">
    <!-- 标题区 -->
    <div class="text-center mb-12">
        <h1 class="text-5xl font-bold text-white mb-4">厨房管家</h1>
        <p class="text-xl text-white opacity-90">高保真原型设计展示</p>
        <div class="mt-6 flex justify-center gap-4">
            <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-white">
                <i class="fas fa-mobile-alt"></i> iPhone 16 Pro 尺寸
            </span>
            <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-white">
                <i class="fas fa-palette"></i> 新拟物化设计风格
            </span>
            <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full text-white">
                <i class="fas fa-code"></i> 可直接用于开发
            </span>
        </div>
    </div>
    
    <!-- 界面展示网格 -->
    <div class="grid-container">
        <!-- 首页 -->
        <div class="iframe-container">
            <h3 class="page-label">
                <i class="fas fa-home"></i> 首页
            </h3>
            <div class="iframe-wrapper">
                <iframe src="home.html" title="首页"></iframe>
            </div>
        </div>
        
        <!-- 菜品管理 -->
        <div class="iframe-container">
            <h3 class="page-label">
                <i class="fas fa-utensils"></i> 菜品管理
            </h3>
            <div class="iframe-wrapper">
                <iframe src="dishes.html" title="菜品管理"></iframe>
            </div>
        </div>
        
        <!-- 点餐界面 -->
        <div class="iframe-container">
            <h3 class="page-label">
                <i class="fas fa-clipboard-list"></i> 点餐
            </h3>
            <div class="iframe-wrapper">
                <iframe src="order.html" title="点餐"></iframe>
            </div>
        </div>
        
        <!-- 订单管理 -->
        <div class="iframe-container">
            <h3 class="page-label">
                <i class="fas fa-chart-line"></i> 订单管理
            </h3>
            <div class="iframe-wrapper">
                <iframe src="orders.html" title="订单管理"></iframe>
            </div>
        </div>
    </div>
    
    <!-- 功能说明 -->
    <div class="max-w-4xl mx-auto mt-16 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-3xl p-8 border border-white border-opacity-20">
        <h2 class="text-3xl font-bold text-white mb-6 text-center">功能特点</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-paint-brush text-white"></i>
                </div>
                <div>
                    <h3 class="text-xl font-semibold text-white mb-2">新拟物化设计</h3>
                    <p class="text-white opacity-80">采用现代化的新拟物化设计语言，界面简洁美观，操作直观</p>
                </div>
            </div>
            
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-mobile-alt text-white"></i>
                </div>
                <div>
                    <h3 class="text-xl font-semibold text-white mb-2">真实手机尺寸</h3>
                    <p class="text-white opacity-80">按照iPhone 16 Pro尺寸设计，完美还原真实手机界面体验</p>
                </div>
            </div>
            
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-code text-white"></i>
                </div>
                <div>
                    <h3 class="text-xl font-semibold text-white mb-2">开发友好</h3>
                    <p class="text-white opacity-80">使用HTML + Tailwind CSS构建，代码结构清晰，可直接用于开发</p>
                </div>
            </div>
            
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-hand-pointer text-white"></i>
                </div>
                <div>
                    <h3 class="text-xl font-semibold text-white mb-2">交互完整</h3>
                    <p class="text-white opacity-80">包含完整的交互逻辑，所有按钮和功能都可正常操作</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <div class="text-center mt-12 pb-8">
        <p class="text-white opacity-70">
            <i class="fas fa-heart text-red-400"></i> 
            用心设计，让每一餐都充满爱意
        </p>
    </div>
</body>
</html>